<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>设置列车交路</title>
    <script type="text/javascript">
      Ext.onReady(function(){
        var routerTemplate = new Ext.XTemplate('<tpl for="."><div class="search-item">', '{train_number} - {line}', '</div></tpl>');
        var routerDS = new Ext.data.Store({
          proxy:new Ext.data.HttpProxy({url:'/router/getAllRouters'}),
          autoLoad:true,
          reader:new Ext.data.JsonReader({
            totalProperty: 'total',
            root: 'root'
          }, [
            {name:'id'},                                                        //用作后面的valueField:
            {name:'train_number'},                                              //用作后面的displayField:
            {name:'line'}
          ])
        });

        var routerUpdateDate = new Ext.form.DateField({
          fieldLabel: '起始时间',
          name: 'router_date',                                                  //得到日期数据
          id: 'router_date',
          format: 'Y-m-d',                                                      //格式化日期，将日期展示成你喜欢的样式
          invalidText: "您输入的日期格式不对，正确格式为2010-01-18",
          allowBlank: false,
          blankText: "设备故障日期必须选择",
          emptyText: '请选择日期...',
          width:130
        })


        var getReceiverComboBoxes = function() {                                //通过触发的方式，动态的得到combobox，这里不能使用常规的下拉框，否则只能拉一次
          return {
            first: {
              xtype: 'combo',
              store: routerDS,
              hiddenName:'firstRouterId',
              displayField:'train_number',
              valueField:'id',
              typeAhead: true,
              allowBlank:false,
              minChars:0,
              tpl: routerTemplate,
              itemSelector: 'div.search-item',
              readOnly:false,
              anchor:'95%',
              mode: 'remote',
              fieldLabel:'第一交路',
              forceSelection: true,
              triggerAction: 'all',
              emptyText:'请选择执行交路.....',
              selectOnFocus:true,
              listWidth:470
            },
            second: {
              xtype: 'combo',
              store: routerDS,
              hiddenName:'secondRouterId',
              displayField:'train_number',
              valueField:'id',
              typeAhead: true,
              allowBlank:false,
              disable:true,
              minChars:1,
              tpl: routerTemplate,
              itemSelector: 'div.search-item',
              readOnly:false,
              anchor:'95%',
              mode: 'remote',
              fieldLabel:'第二交路',
              forceSelection: true,
              triggerAction: 'all',
              emptyText:'请选择执行交路.....',
              selectOnFocus:true,
              listWidth:470

            },
            third:{
              xtype: 'combo',
              store: routerDS,
              hiddenName:'thirdRouterId',
              displayField:'train_number',
              valueField:'id',
              typeAhead: true,
              allowBlank:false,
              disable:true,
              minChars:1,
              tpl: routerTemplate,
              itemSelector: 'div.search-item',
              readOnly:false,
              anchor:'95%',
              mode: 'remote',
              fieldLabel:'第三交路',
              forceSelection: true,
              triggerAction: 'all',
              emptyText:'请选择执行交路.....',
              selectOnFocus:true,
              listWidth:470
            }
          }
        }

        var container = new Ext.Panel({
          margins: '0',
          paddings: '0',
          height: 80,
          width: 320,
          layout: 'form',
          labelAlign: 'left'
        });

        var routerNumber = new Ext.form.RadioGroup({                            //单选按钮群组。还能根据回填值，自动回填下拉框
          id: 'router_number',
          name: 'router_number',
          fieldLabel:'交路种类',
          allowBlank: false,
          items: [{
              columnWidth: '1',
              items: [{
                  boxLabel: '独立交路',
                  name: 'router_number',
                  inputValue: '1'
                },{
                  boxLabel: '两路轮询',
                  name: 'router_number',
                  inputValue: '2'
                },{
                  boxLabel: '三路轮询',
                  name: 'router_number',
                  inputValue: '3'
                }]
            }],
          listeners: {
            scope: this,
            change: function(rg, checked) {
              if (container.items.getCount() > 0) {
                container.removeAll(true);
              }
              var value = checked.getGroupValue();
              switch (value) {
                case '1':
                  container.add(getReceiverComboBoxes().first);
                  break;
                case '2':
                  container.add(getReceiverComboBoxes().first);
                  container.add(getReceiverComboBoxes().second);
                  break;
                case '3':
                  container.add(getReceiverComboBoxes().first);
                  container.add(getReceiverComboBoxes().second);
                  container.add(getReceiverComboBoxes().third);
                  break;
                default:
                  break;
              }
              container.doLayout();
              if (firstRouterId) {                                              //如果firstRouterId有值，就显示第一个构件
                container.items.items[0].setValue(firstRouterId);               //显示构件后，并赋上值
                //firstRouterId = null;                                           //将值设为空，选别的交路个数的时候，就不会赋值了，2变1的时候，就不会报错
              }
              if (secondRouterId){                                              //如果secondRouterId有值，就显示第二个构件
                container.items.items[1].setValue(secondRouterId);
                //secondRouterId = null;
              }
              if (thirdRouterId){                                               //如果firstRouterId有值，就显示第三个构件
                container.items.items[2].setValue(thirdRouterId);
                //thirdRouterId = null;
              }
            }
          },
          anchor: '95%'
        })

        var trainId=<%=params[:trainId]%>
        var editTrainRouterForm = new Ext.form.FormPanel({
          width:525,
          url:'/trainrouter/update',
          buttonAlign:'center',
          autoHeight:true,
          labelWidth:40,
          frame: true,
          reader:new Ext.data.JsonReader({
          },[
            {name:'id'},
            {name:'router_number'},
            {name:'firstRouterId'},
            {name:'secondRouterId'},
            {name:'thirdRouterId'},
            {name:'router_date',type:'date',dateFormat: 'Y/m/d'}
          ]
        ),
          items:[{
              xtype:'hidden',
              name:'id',
              value:''
            },
            {layout:'column'
              ,items:[
                {
                  labelWidth:70,
                  layout:'form',
                  width:160,
                  items:[routerNumber]
                },
                {
                  layout:'form',
                  items:[{
                      xtype:'fieldset',
                      title:'设置交路',
                      labelWidth:70,
                      width:330,
                      buttonAlign: 'center',
                      autoHeight:true,
                      items:[routerUpdateDate,container]
                    }]
                }
              ]
            }],
          buttons:[{
              text:'确定',
              handler: function(){
                if (editTrainRouterForm.form.isValid()) {
                  editTrainRouterForm.form.submit({
                    method: 'post',
                    waitMsg: '正在更新列车...',
                    success: function(result, response){
                      if (response.result.info == "success") {
                        editTrainRouterWin.destroy();
                      }
                      else {
                        Ext.MessageBox.alert('消息', response.result.info);
                      }
                    },
                    failure: function(result, response){
                      Ext.MessageBox.alert('提示', result.responseText);
                    }
                  });
                }
                else {
                  Ext.MessageBox.alert('错误提示', '请按要求填写必输选项.');
                }
              }
            },{
              text:'取消',
              handler:function(){
                editTrainRouterWin.destroy();
              }
            }]
        });
        
        routerDS.load({
          callback:function(r,options,success){
            if(success){
              editTrainRouterForm.form.load({
                url: '/train/editTrainRouterData?trainId=' + trainId,
                waitMsg: '正在载入数据...',
                success: function(form, action){
                  firstRouterId = action.result.data.firstRouterId;
                  secondRouterId = action.result.data.secondRouterId;
                  thirdRouterId = action.result.data.thirdRouterId;
                },
                failure: function(form, action){
                  Ext.MessageBox.alert('提示信息', '信息加载失败');
                }
              });
            }else{
              Ext.MessageBox.alert('提示信息', '信息加载失败');
            }
          }
        })
        editTrainRouterForm.render('editTrainRouterForm');
      })

    </script>
  </head>
  <body>
    <div id="editTrainRouterForm"></div>
  </body>
</html>
